<template>
  <div class="login-warp py-4" @keyup.enter="onSubmit" :class="{ border: border }">
    <div>
      <div style="text-align: center; margin-bottom: 30px">
        <h3 style="margin-top: 0">{{ loginTypeLabel }}</h3>
        <p class="text-muted">{{ plantformDesc }}</p>
      </div>

      <el-form ref="form" style="margin-top: 20px" :model="params" :rules="rules">
        <!-- 用户名 -->
        <el-form-item prop="loginName">
          <el-input
            class="login-input"
            placeholder="请输入手机号/用户名"
            v-model.trim="params.loginName"
            size="large"
          >
            <i slot="prefix" class="fa fa-user el-input__icon"></i>
          </el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="loginSecret">
          <el-input
            class="login-input"
            placeholder="请输入密码"
            v-model.trim="params.loginSecret"
            type="password"
            size="large"
          >
            <i slot="prefix" class="fa fa-lock el-input__icon"></i>
          </el-input>
        </el-form-item>

        <div class="d-flex justify-content-between mb-1 align-items-center">
          <div class="d-flex align-items-center">
            <template v-if="loginType === 1">
              <el-checkbox v-model="isCheck" @change="onCheck"></el-checkbox>
              <small class="text-muted">我已阅读并同意</small>
              <el-button type="text" @click="onRead"><small>《贵州农担授权协议》</small></el-button>
            </template>
          </div>
          <div>
            <router-link to="/forget" class="text-muted">忘记密码？</router-link>
          </div>
        </div>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-button
                size="large"
                type="primary"
                style="width: 100%"
                @click="onSubmit"
                :loading="loginLoading"
              >
                登 录
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button
                size="large"
                type="default"
                style="width: 100%"
                @click="$router.push('/register')"
              >
                注 册
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

    <auth-protocol
      :visible.sync="protocolVisible"
      @success="
        () => {
          isRead = true
          isCheck = true
        }
      "
    ></auth-protocol>
  </div>
</template>

<script>
import { PLATFORM_NAME } from '@/nd/plugins/constant'
import { loginLinks } from '@/nd/plugins/enum'
import AuthProtocol from '@/nd/components/AuthProtocol'

export default {
  components: {
    AuthProtocol,
  },
  props: {
    border: Boolean,
  },
  data() {
    return {
      plantformName: PLATFORM_NAME,
      plantformDesc: '专业的农业产业融资担保服务解决方案',
      baseUrl: '',
      // 登录接口参数
      params: {
        clientId: '',
        loginName: '',
        loginSecret: '',
        verifyCode: '',
        isMerchant: 0,
      },

      // 表单验证规则
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入手机号码或用户名',
            trigger: 'blur',
          },
        ],
        loginSecret: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      },

      // 是否为商户
      isMerchant: false,
      // 登录按钮状态变化
      loginLoading: false,
      // 跳转保留
      redirect: null,
      // 用户名和二维码登录切换
      isQrcode: false,
      enumLoginUrl: {
        1: '/credit-qr/#/',
        2: '/gov/#/',
        3: '/admin/#/vimi?f=vimi8',
        4: '/bank/#/',
        5: '/credit/#/',
      },
      //是否阅读协议
      isRead: false,
      isCheck: false,
      protocolVisible: false,
    }
  },
  computed: {
    loginType() {
      const type = +this.$route.query.type
      return isNaN(type) ? '' : type
    },
    loginTypeLabel() {
      const link = loginLinks.find(link => link.type === this.loginType)
      return link ? link.label : this.plantformName
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onRead() {
      this.protocolVisible = true
    },
    onCheck() {
      if (!this.isRead) {
        this.isCheck = false
        return this.$message.warning('请先阅读《贵州农担授权协议》')
      }
    },
    onSubmit() {
      if (!this.isCheck && this.loginType === 1) {
        return this.$message.warning('请先阅读并勾选同意《贵州农担授权协议》')
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.params.isMerchant = this.isMerchant ? 1 : 0
          if (this.loginType) {
            this.params.orgClassType = this.loginType
          }
          this.postLogin()
        } else {
          this.$message.error('输入错误，请重新输入！')
        }
      })
    },

    postLogin() {
      this.loginLoading = true
      this.$store
        .dispatch('login', { data: this.params })
        .then(() => {
          this.$message({ message: '登录成功', type: 'success', showClose: true, duration: 2000 })
          window.location.href = `${window.location.origin}${
            this.enumLoginUrl[this.loginType] || '/cadmin/#/'
          }`
          // window.location.href = getPlatformUrl(data)
        })
        .catch(err => {
          this.$message.error(err?.data?.errorDescription ?? '登录失败！')
        })
        .finally(() => {
          this.loginLoading = false
        })
    },
  },
}
</script>

<style scoped lang="scss">
.login-warp {
  position: relative;
  overflow: hidden;
  max-width: 360px;
  border-radius: 4px;
  &.border {
    border: 1px solid #ddd;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  }
  .login-switch {
    position: absolute;
    right: 10px;
    top: 5px;
    .login-switch-icon {
      width: 50px;
      height: 50px;
      cursor: pointer;
      color: #57b231;
    }
  }
  .login-input .el-input-group__prepend {
    padding-left: 12px;
    padding-right: 12px;
  }
  .login-qrcode {
    text-align: center;
    margin: 30px;
  }
  .login-qrcode-hint {
    overflow: hidden;
    background-color: #eee;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    margin-bottom: 7px;
  }
}
</style>
